<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

</html>
<script>
    //一.变量和常量。
    //1.let概念：
    //ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
    //代码块:{}括起来的代码。
    //if(){}  switch(){}  for(){} while(){}  function(){}
    //全局变量：函数外面的变量。(函数内部的变量声明时候没有var关键字)
    //局部变量：函数内部的变量。
    //块作用域：声明的变量只在代码块内有效。

    //2.let特点：
    //2.1.即let所声明的变量就“ 绑定” 这个区域， 不再受外部的影响。
    // for (var i = 1; i <= 10; i++) {
    //     console.log(i);
    // }
    // console.log(i); //11

    // for (let j = 1; j <= 10; j++) {
    //     console.log(j);
    // }
    // console.log(j); //ReferenceError: j is not defined  外面无法访问。

    // var aLi = document.querySelectorAll('ul li');
    // for (var i = 0; i < aLi.length; i++) {
    //     aLi[i].onclick = function() {
    //         console.log(i); //输出的是循环最后一次值。点击的时候，循环已经结束了。
    //     }
    // }

    // for (let i = 0; i < aLi.length; i++) {
    //     aLi[i].onclick = function() {
    //         console.log(i); //即let所声明的变量就“ 绑定” 这个区域， 不再受外部的影响  i就是索引
    //     }
    // }

    // 2.2.Let声明的变量不存在变量提升(前置访问undefined不存在了)，变量声明之前不能使用。
    // console.log(a); //undefined
    // var a = 10;
    // console.log(a); //10

    // console.log(a); //报错，不存在变量提升(暂时性死区)
    // let a = 10;
    // console.log(a); //10

    // 2.3.let不允许在相同作用域内，重复声明同一个变量。
    // var a = 10;
    // var a = 20;
    // var a = 30;
    // console.log(a);//覆盖
    // let b = 10;//声明变量b
    // let b = 20;//声明变量b
    // console.log(b); // SyntaxError: Identifier 'b' has already been declared 报错

    // let c = 30; //声明变量c
    // c = 300; //改变变量c的值
    // console.log(c); //300

    // 2.4.ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以,let和var都是这样的。
    // {
    //     let a = 10; 
    //     console.log(b);//报错，无法获取，内到外的关系
    //     {
    //         console.log(a); //10
    //         let b = 20;
    //     }
    // }

    // 3.其他的情况let和var一样的使用。
    //定义多个变量，松散类型，值可以改变，写入内存这些都是一样的。


    // 4.常量：const声明一个只读的常量。一旦声明，常量的值就不能改变。
    // 4.1.常量简单使用场景
    // 能够使用常量尽量使用常量(值不会发生变量)
    // 获取元素对象
    // 函数的封装
    // 考虑不变的值......
    // const aLi = document.querySelectorAll('ul li');
    // const PI = 3.14;
    // PI = 3.1415926;//报错
    // 4.2.常量也不能重复声明，具有块作用域。

    // 5.应用
    document.onclick = function(ev) {
        // let ev = ev || window.event; //这里报错，ev已经被使用了。
        // var ev = ev || window.event; //ok
        let e = ev || window.event; //ok
        console.log(e);
    }
</script>